<template>
	<view class="content">
		<!--居住信息-->
		<view class="content_1">
			<view class="title">居住位置</view>
			<view class="line_title"></view>
			<!--居住位置picker弹窗-->
			<view class="choose_view">
				<!-- 参考 https://www.jianshu.com/p/924f3b560e4c ~~ -->
				<!-- 城市列表 -->
				<picker :class="data.citys == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'citysList')" :value="data.citys" :range="citysList" range-key="areaName">
					<view class="choose_text">{{citysList[data.citys].areaName}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 区域列表 -->
				<picker class="choose_box" :class="data.classify == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'classifyList')" :value="data.classify" :range="classifyList"
				 range-key="areaName">
					<view class="choose_text">{{classifyList[data.classify].areaName}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 热点标签列表 -->
				<picker class="choose_box" :class="data.hot == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'hotList')" :value="data.hot" :range="hotList" range-key="describes">
					<view class="choose_text">{{hotList[data.hot].describes}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
			</view>
		</view>
		<!--房屋信息-->
		<view class="content_2">
			<view class="title">房屋信息</view>
			<view class="line_title"></view>
			<!--房屋信息picker弹窗-->
			<view class="choose_view">
				<!-- 室 -->
				<picker class="choose_box" :class="data.living == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'livingList')" :value="data.living" :range="livingList"
				 range-key="show_name">
					<view class="choose_text">{{livingList[data.living].show_name}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 房 -->
				<picker class="choose_box" :class="data.bed == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'bedList')" :value="data.bed" :range="bedList" range-key="show_name">
					<view class="choose_text">{{bedList[data.bed].show_name}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
				<!-- 卫 -->
				<picker class="choose_box" :class="data.toilet == '' ? 'choose_box' : 'choose_box_active'" @change="pickerChange($event,'toiletList')" :value="data.toilet" :range="toiletList"
				 range-key="show_name">
					<view class="choose_text">{{toiletList[data.toilet].show_name}}</view>
					<image class="choose_icon" src="../../../../static/mine/downjiantou.svg"></image>
				</picker>
			</view>
		</view>
		<!--最低签约时长-->
		<view class="content_3">
			<view class="title">最低签约时长</view>
			<view class="line_title"></view>
			<view class="choose_time_view">
				<block v-for="(data, index) in signTime" :key="index">
					<view :class="[data.status == 1 ? 'time_box_active' : 'time_box']" @click="toChoose(index, 'signTime')">{{data.show_name}}</view>
				</block>
			</view>
		</view>
		<!--租金额-->
		<view class="content_7">
			<view class="title">租金额</view>
			<view class="line_title"></view>
			<view class="range_money">
				<view class="money">¥ {{startmoney}} - ¥ {{endmoney}}</view>
			</view>
			<view class="rang_view">
				<range-slider :min="min_money" :max="max_money" :values="range_money" :step="step" class="range_choose" @rangechange='rangeChange'></range-slider>
			</view>
			<view class="rang_font">
				<view>¥ 0</view>
				<view>¥ 不限</view>
			</view>
		</view>
		<!--房屋特色-->
		<!-- <view class="content_4">
			<view class="title">房屋特色</view>
			<view class="line_title"></view>
			<view class="special_view">
				<block v-for="(data, index) in lableList" :key='index'>
					<view :class="[data.status == 1 ? 'choose_house_special':'house_special']" @click="toChoose(index, 'lableList')">{{data.show_name}}</view>
				</block>
			</view>
		</view> -->
		<!--备注-->
		<!-- <view class="content_5">
			<view class="title">备注 </view>
			<view class="line_title"></view>
			<textarea class="remarks_input" placeholder="多行输入内容" :value="inputRemarks" @input="inputButton($event,'remarks')"></textarea>
		</view> -->
		<!--底部提交-->
		<view class="content_6" @click="submit">
			提交
			<!-- <view class="contract_view">
				<view class="contract_icon_view" v-if="readstate == '0'" @click="readContract"></view>
				<view class="contract_icon_view" style="border: 5upx solid #5555FF;" v-if="readstate == '1'" @click="readContract">
					<view class="contract_icon"></view>
				</view>
				<view class="contract">勾选即代表已同意 <br>
					<view  style="color: #B3E9DC; font-weight: bold;"> 《用户使用协议》和《隐私声明》</view>
				</view>
			</view>
			<view class="submit" @click="submit">提交</view> -->
		</view>
	</view>
</template>

<script>
	//引入子组件
	import Range from '../../../../components/range-slider/range-slider.vue';
	//导入接口请求文件
	import {Request} from '../../../../utils/request.js';
	const app = getApp();
	export default {
		//注册子组件
		components: {
			Range
		},
		data() {
			return {
				//初始选中最小租金
				startmoney: '',
				//初始选中最大租金
				endmoney: '',
				range_money: [],
				max_money: '',
				min_money: '',
				//设置步长
				step: '',
				readstate: '0',
				data: {
					citys: 0,
					classify: 0,
					hot: 0,
					living: 0,
					bed: 0,
					toilet: 0,
				},
				//城市列表
				citysList: [],
				//区域列表
				classifyList: [],
				//热点列表
				hotList: [],
				//室列表
				livingList: [],
				//房列表
				bedList: [],
				//卫列表
				toiletList: [],
				//最低签约时长
				signTime: [],
				//房屋标签列表
				lableList: [],
				//备注输入信息
				inputRemarks: [],
				arr: Array(),
			}
		},
		methods: {
			//获取子组件传过来的值
			rangeChange:function (res) {
				// console.log(res)
				this.startmoney = res.minValue
				this.endmoney = res.maxValue
			},
			//picker选择改变
			pickerChange: function(e, val) {
				let index = e.target.value;
				if(val == 'citysList'){
					this.citysId = this.citysList[index].areaId;
					this.data.citys = index;
					this.district();
				}
				if(val == 'classifyList'){
					this.classifyId = this.classifyList[index].areaId;
					this.data.classify = index;
				}
				if(val == 'hotList'){
					this.hotId = this.hotList[index].id;
					this.data.hot = index;
				}
				if(val == 'livingList'){
					this.livingId = this.livingList[index].id;
					this.data.living = index;
				}
				if(val == 'bedList'){
					this.bedId = this.bedList[index].id;
					this.data.bed = index;
				}
				if(val == 'toiletList'){
					this.toiletId = this.toiletList[index].id;
					this.data.toilet = index;
				}
				
			},
			//获取城市区域列表数据
			district: function(){
				let PostApi = (url, PostData, Response) => {
					new Request(url).request(
						()=>{
							return 'POST'
						},
						()=>{
							return PostData;
						},
						(res)=>{
							Response(res);
						}
					);
				}
				let that = this;
				//获取市区域列表
				PostApi('landboos/Create_House/GetCityList', {city: this.citysId}, (res)=>{
					that.classifyList = res.data.data;
					that.data.classify = 0;
					that.classifyId = that.classifyList[0].areaId;
				});
			},
			//最低签约时长 | 特色标签 选择
			toChoose: function(index, arr) {
				for(let i=0,l=this[arr].length; i<l; i++){
					if(index == i){
						this[arr][index].status = 1
					}else{
						this[arr][i].status = 2
					}
				}
				if(arr == 'signTime'){
					this.chooseTimeId = this[arr][index].id;
					console.log('this.chooseTimeId',this.chooseTimeId)
				}
				if(arr == 'lableList'){
					this.chooseLableId = this[arr][index].id;
					console.log('this.chooseLableId',this.chooseLableId)
				}
				
			},
			//监听输入
			inputButton: function(e, data){
				if(data == 'remarks'){
					this.inputRemarks = e.detail.value;
				}
			},
			//阅读合同
			readContract: function() {
				if (this.readstate == '0') {
					this.readstate = '1'
				} else {
					this.readstate = '0'
				}
			},
			//提交
			submit: function(){
				// if(this.readstate != 1){
				// 	new Request().showToast('请勾选协议');
				// 	return;
				// }
				if(this.citysId == '' || this.citysId == undefined || this.citysId == 0){
					new Request().showToast('城市列表未选择');
					return;
				}
				if(this.classifyId == '' || this.classifyId == undefined || this.classifyId == 0){
					new Request().showToast('区域列表未选择');
					return;
				}
				if(this.hotId == '' || this.hotId == undefined || this.hotId == 0){
					new Request().showToast('热点未选择');
					return;
				}
				if(this.livingId == '' || this.livingId == undefined || this.livingId == 0){
					new Request().showToast('房屋信息不齐');
					return;
				}
				if(this.bedId == '' || this.bedId == undefined || this.bedId == 0){
					new Request().showToast('房屋信息不齐');
					return;
				}
				if(this.toiletId == '' || this.toiletId == undefined || this.toiletId == 0){
					new Request().showToast('房屋信息不齐');
					return;
				}
				if(this.chooseTimeId == '' || this.chooseTimeId == undefined){
					new Request().showToast('最低签约时长未选择');
					return;
				}
				// if(this.chooseLableId == '' || this.chooseLableId == undefined){
				// 	new Request().showToast('房屋特色未选择');
				// 	return;
				// }
				if(this.inputRemarks == '' || this.inputRemarks == undefined){
					var PostData = {
						'citysId': this.citysId,
						'classifyId': this.classifyId,
						'hotId': this.hotId,
						'livingId': this.livingId,
						'bedId': this.bedId,
						'toiletId': this.toiletId,
						'chooseTimeId': this.chooseTimeId,
						// 'chooseLableId': this.chooseLableId,
						'startmoney': this.startmoney,
						'endmoney': this.endmoney,
						'openid': app.globalData.openid,
					}
				}else{
					var PostData = {
						'citysId': this.citysId,
						'classifyId': this.classifyId,
						'hotId': this.hotId,
						'livingId': this.livingId,
						'bedId': this.bedId,
						'toiletId': this.toiletId,
						'chooseTimeId': this.chooseTimeId,
						// 'chooseLableId': this.chooseLableId,
						'startmoney': this.startmoney,
						'endmoney': this.endmoney,
						// 'inputRemarks': this.inputRemarks,
						'openid': app.globalData.openid,
					}
				}
				let url = 'customer/push/choose/Upload_Push/PushEdit';
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return PostData;
					},
					(res)=>{
						if(res.data.code == 1){
							new Request().showToast('修改成功', 'success', ()=>{
								this.eventChannel.emit('someEvent', {data: 'test'});
								uni.navigateBack({
								    delta: 1
								});
							})
						}
					}
				);
			}
		},
		onLoad(option) {
			// this.push_id = option.push_id;
			this.eventChannel = this.getOpenerEventChannel();
			
			if(app.globalData.Logincode == -1){
				new Request().showToast('您还未登陆','none', ()=>{
					setTimeout(()=>{
						uni.switchTab({url: '/pages/mine/mine',});
					},2001);
				});
				return;
			}
			let PostApi = (url, PostData, Response) => {
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return PostData;
					},
					(res)=>{
						Response(res);
					}
				);
			}
			let that = this;
			new Request('customer/push/choose/Upload_Push/GetCustomerPushId').request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
					};
				},
				(response)=>{
					let resData = response.data.data;
					//备注信息
					if(resData.text != '' || resData.text != undefined){
						that.inputRemarks = resData.text;
					}
					//获取广东省城市列表
					PostApi('landboos/Create_House/GetCityList', {city: 1935}, (res)=>{
						that.citysList = res.data.data;
						that.citysList.unshift({id: 0,areaName: '城市'});
						that.citysList.map((e,n)=>{
							if(e.areaId == resData.city_id){
								that.data.citys = n;
								that.citysId = e.areaId;
								return;
							}
						});
					});
					//获取广东省广州市区域列表
					PostApi('landboos/Create_House/GetCityList', {city: resData.city_id}, (res)=>{
						that.classifyList = res.data.data;
						that.classifyList.unshift({id: 0,areaName: '区域'});
						that.classifyList.map((e,n)=>{
							if(e.areaId == resData.area_id){
								that.data.classify = n;
								that.classifyId = e.areaId;
								return;
							}
						});
					});
					//获取热点标签
					PostApi('landboos/Create_House/GetRentType', {table: 'fa_renthouse_master_hot'}, (res)=>{
						that.hotList = res.data.data;
						that.hotList.unshift({id: 0,describes: '热点'});
						that.hotList.map((e,n)=>{
							if(e.id == resData.hot_id){
								that.data.hot = n;
								that.hotId = e.id;
								return;
							}
						});
					});
					//获取室列表
					//1是 室表，2是 房表，3是 卫表， 4是最低签约时长，5是特色标签
					PostApi('customer/push/Get_Push_List/GetList', {type: 1}, (res)=>{
						that.livingList = res.data.data;
						that.livingList.unshift({id: 0,show_name: '请选择'});
						that.livingList.map((e,n)=>{
							if(e.id == resData.shi_id){
								that.data.living = n;
								that.livingId = e.id;
								return;
							}
						});
					});
					//房列表
					PostApi('customer/push/Get_Push_List/GetList', {type: 2}, (res)=>{
						that.bedList = res.data.data;
						that.bedList.unshift({id: 0,show_name: '请选择'});
						that.bedList.map((e,n)=>{
							if(e.id == resData.fan_id){
								that.data.bed = n;
								that.bedId = e.id;
								return;
							}
						});
					});
					//卫列表
					PostApi('customer/push/Get_Push_List/GetList', {type: 3}, (res)=>{
						that.toiletList = res.data.data;
						that.toiletList.unshift({id: 0,show_name: '请选择'});
						that.toiletList.map((e,n)=>{
							if(e.id == resData.wei_id){
								that.data.toilet = n;
								that.toiletId = e.id;
								return;
							}
						});
					});
					//最低签约时长列表
					PostApi('landboos/Create_House/GetRentType', {
						table: 'fa_renthouse_master_rentmoney'
					}, (res) => {
						res.data.data.map((e)=>{
							if(e.id == resData.time_id){
								e.status = 1;
								that.chooseTimeId = e.id;
								e.show_name = e.describes;
								return;
							}else{
								e.status = 2;
								e.show_name = e.describes;
							}
						});
						that.signTime = res.data.data
					});
					// PostApi('customer/push/Get_Push_List/GetList', {type: 4}, (res)=>{
					// 	that.signTime = res.data.data;
					// 	that.signTime.map((e,n)=>{
					// 		if(e.id == resData.time_id){
					// 			e.status = 1;
					// 			that.chooseTimeId = e.id;
					// 			return;
					// 		}
					// 	});
					// });
					//房屋特色标签列表
					// PostApi('customer/push/Get_Push_List/GetList', {type: 5}, (res)=>{
					// 	that.lableList = res.data.data;
					// 	that.lableList.map((e,n)=>{
					// 		if(e.id == resData.tip_id){
					// 			e.status = 1;
					// 			that.chooseLableId = e.id;
					// 			return;
					// 		}
					// 	});
					// });
					//租金范围
					PostApi('customer/push/Get_Push_List/GetRent', {type: 6}, 
					(res)=>{
						// that.startmoney = res.data.data.choose_min;
						// that.endmoney = res.data.data.choose_max;
						that.startmoney = resData.rent_money_start;
						that.endmoney = resData.rent_money_end;
						that.max_money = res.data.data.max;
						that.min_money = res.data.data.min;
						that.step = res.data.data.step;
						that.range_money = [that.startmoney, that.endmoney];
					});
				}
			);
			
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 200upx;
	}

	/*
		居住信息样式
	*/
	.content_1 {
		margin: 0 40upx;
		margin-top: 40upx;
	}

	.title {
		height: 37upx;
		font-size: 28upx;
		color: #333333;
		line-height: 37upx;
	}

	.line_title {
		height: 6upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 4upx;
	}

	.choose_view {
		height: 60upx;
		margin: 0 5upx;
		margin-top: 15upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.choose_box {
		width: 200upx;
		height: 60upx;
		border-radius: 60upx;
		border: 5upx solid #D1D1D1;
		box-sizing: border-box;
		padding: 10upx 20upx 10upx 30upx;
		position: relative;
	}
	
	.choose_box_active{
		width: 200upx;
		height: 60upx;
		border-radius: 60upx;
		border: 5upx solid #B3E9DC;
		box-sizing: border-box;
		padding: 10upx 20upx 10upx 30upx;
		position: relative;
	}

	.choose_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #666666;
	}

	.choose_icon {
		height: 28upx;
		width: 28upx;
		position: absolute;
		top: 15upx;
		right: 20upx;
	}

	/*
		房屋信息样式
	*/
	.content_2 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	/*
		最低签约时长样式
	*/
	.content_3 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	.choose_time_view {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.time_box {
		height: 60upx;
		width: 160upx;
		line-height: 50upx;
		border-radius: 60upx;
		box-sizing: border-box;
		border: 5upx solid #B3E9DC;
		text-align: center;
		font-size: 28upx;
		color: #666666;
		margin: 10upx 0;
	}

	.time_box_active {
		height: 60upx;
		width: 160upx;
		line-height: 60upx;
		border-radius: 60upx;
		background-color: #B3E9DC;
		text-align: center;
		font-size: 28upx;
		color: #FFFFFF;
		margin: 10upx 0;
	}

	/*
		房屋特色样式
	*/
	.content_4 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	.special_view {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap; //弹性盒元素换行
	}

	.house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #999999;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}
	/* 选择的css */
	.choose_house_special {
		height: 57upx;
		border-radius: 57upx;
		border: 4upx solid #B3E9DC;
		background: #B3E9DC;
		line-height: 57upx;
		font-size: 28upx;
		display: flex;
		align-items: center;
		text-align: center;
		padding: 0upx 40upx;
		color: #FFFFFF;
		margin-bottom: 20upx;
		margin-right: 26upx;
	}

	/*
		备注样式
	*/
	.content_5 {
		margin: 0 40upx;
		margin-top: 80upx;
	}

	.remarks_input {
		height: 180upx;
		width: 568upx;
		margin: 0 auto;
		margin-top: 20upx;
		background-color: #FFFFFF;
		font-size: 28upx;
		color: #888888;
		padding: 10upx;
	}

	/*
		底部提交样式
	*/
	.content_6 {
		position: fixed;
		z-index: 99999;
		height: 100upx;
		width: 714upx;
		background-color: #63D0D5;
		bottom: 0upx;
		left: 0upx;
		padding-left: 40upx;
		font-size: 32upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
		font-weight: bold;
	}

	.contract_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.contract_icon_view {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		border: 5upx solid #cccccc;
		box-sizing: border-box;
		margin-right: 30upx;
		display: flex;
		align-items: center;
	}

	.contract_icon {
		height: 22upx;
		width: 22upx;
		border-radius: 25upx;
		background-color: #5555ff;
		margin: 0 auto;
	}

	.contract {
		width: 410upx;
		font-size: 26upx;
		color: #FFFFFF;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}

	/*
		租金额样式
	*/
	.content_7 {
		margin: 0 40upx;
		margin-top: 80upx;
	}
	
	.range_money{
		height: 100upx;
		display: flex;
		align-items: center;
	}
	
	.money{
		margin: 0 auto;
		height: 20upx;
		line-height: 20upx;
		font-size: 28upx;
		color: #63D0D5;
	}
	
	.rang_view{
		height: 80upx;
		width: 600upx;
		margin: 0 auto;
	}
	
	.rang_font{
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #999999;
	}
	.range_choose {
	}
</style>
